<template>
	<view class="content">
		<view class="warp">
			<view>我的手机号：</view>
			<text class="title">{{ phone }}</text>
			<u-line color="info" class="u-m-t-40 u-m-b-40"></u-line>
			<view>做题统计：</view>
			<view class="u-flex u-row-center u-col-center" style="flex-direction: column;">
				<view class="pie">
					<view class="pie2" :style="pieStyle">
					</view>
				</view>
				<view class="nav">
					<view class="tab red"></view>
					<view>
						错题数量：{{ num - correct }}
					</view>
				</view>
				<view class="nav">
					<view class="tab green"></view>
					<view>
						正确数量：{{ correct }}
					</view>
				</view>
				<view class="nav">
					<view class="tab"></view>
					<view>
						答题总数：{{ num }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {userinfoApi} from '../api.js'
	export default {
		data() {
			return {
				phone: '',
				num: 0,
				correct: 0,
				rate: 0
			}
		},
		onLoad() {
			this.phone = uni.getStorageSync('phone')
			this.getUser()
		},
		computed: {
			pieStyle() {
				return `transform: rotate(${this.rate}turn)`
			}
		},
		methods: {
			getUser() {
				userinfoApi()
				.then(res => {
					this.num = res.num
					this.correct = res.correct
					this.rate = res.rate / 100
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$green-color : #91CD76;
	$red-color : #EF6667;

	.content {
		padding: 40px 20px;
		height: calc(100vh - 50px);
		width: 100vw;

		.warp {
			border: 1px solid #ccc;
			border-radius: 10px;
			padding: 20px;
			min-height: 50vh;
		}

		.title {
			font-size: 40px;
		}

		.nav {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
		}

		.tab {
			width: 26rpx;
			height: 26rpx;
			margin-right: 20rpx;
		}

		.tab.green {
			background-color: $green-color;
		}

		.tab.red {
			background-color: $red-color;
		}

		.pie {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background: $red-color;
			margin-top: 20px 0;
			background-image: linear-gradient(to right, transparent 50%, $green-color 0)
		}

		.pie2 {
			content: '';
			display: block;
			margin-left: 50%;
			height: 100%;
			border-radius: 0 100% 100% 0/50%;
			background-color: inherit;
			transform-origin: left;
		}
	}
</style>
